<template>
  <div>
    <Row style="margin:20px 0;">
      <Card>
        <div style="margin-top: 6px">
          <Form ref="searchData" :model="searchData" :label-width="80">
            <Row>
              <i-col :xs="24" :md="12" :lg="6">
                <FormItem label="选择年月" prop="dateTime">
                  <DatePicker
                    v-model="searchData.dateTime"
                    type="month"
                    @on-change="handlerFormat"
                    format="yyyyMM"
                    placeholder="选择年月"
                    style="width: 200px"
                  ></DatePicker>
                </FormItem>
              </i-col>
            </Row>
            <FormItem>
              <Button type="primary" @click="searchSubmit(10,1)">提交搜索</Button>
              <Button @click="seachReset('searchData')" style="margin-left: 8px">重置</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </Row>
    <div>
      <p class="redTips">输入框必须选择名次后才能查看乡镇指标分析</p>
      <p class="redTips">点击乡镇按钮可查看该乡镇指标分析</p>
    </div>
    <Row>
      排名前
      <InputNumber placeholder="必填" v-model="rankCustom.topNum" :min="1" style="width:70px;"></InputNumber>名 &nbsp;&nbsp;&nbsp;
      排名在
      <InputNumber placeholder="必填" v-model="rankCustom.badNum" :min="1" style="width:70px;"></InputNumber>名之后
    </Row>
    <!-- 乡镇分析按钮 -->
    <!-- 乡镇只能查看自己的 超管看全部 -->
    <Row>
      <Button
        v-if="item.value === departCode || SuperAdmin === true"
        :disabled="rankCustom.topNum === null || rankCustom.badNum === null"
        type="primary"
        @click="townBtn(item.value,item.label)"
        :value="item.value"
        v-for="item in townList"
        :key="item.label"
        style="margin:3px 2px;"
      >{{item.label}}</Button>
    </Row>
    <!-- 表格 -->
    <Row style="margin-top:20px">
      <Card>
        <Table
          border
          :loading="tabelLoading"
          ref="selection"
          :columns="tableHead"
          :data="tableData"
        ></Table>
        <div style="margin-top:20px;margin-left:35%">
          <template>
            <Page
              @on-change="pageNumberChange"
              @on-page-size-change="pageSizeChange"
              :page-size="pageSize"
              :total="pageTotal"
              show-elevator
              show-sizer
            />
          </template>
        </div>
      </Card>
    </Row>
    <!-- 指标详情详情弹窗框  图表 -->
    <Drawer
      :title="indexTitle"
      :mask-closable="false"
      @on-close="cancelModal"
      :styles="styles"
      width="100%"
      v-model="isshowModal"
      id="analysisDrawer"
    >
      <Row>
        <Card>
          <h3 v-if="isClickIndex" align="center">{{indexDatetime}}</h3>
          <!-- 选择乡镇对比数据 -->
          <div v-if="isClickIndex">
            <Select v-model="indexData.townListData" multiple placeholder="可自由选择乡镇进行数据对比">
              <Option
                v-for="item in townList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
            <div style="margin-top:10px;">
              <DatePicker
                v-model="indexData.dateTime"
                type="month"
                @on-change="indexFormat"
                format="yyyyMM"
                placeholder="选择年月"
                style="width: 200px"
              ></DatePicker>
              <Button type="primary" @click="submitCompare" style="margin-left:10px;">提交对比</Button>
              <Button type="default" @click="submitRest" style="margin-left:10px;">重置</Button>
            </div>
          </div>
          <h2 v-if="!indexChartData.name.length" style="text-align:center;">暂无数据</h2>
          <!-- 图表 -->
          <div v-if="isShowChart">
            <bar-stack
              v-if="indexChartData.name.length"
              :data="indexChartData"
              :title="''"
              style="height: 350px;width:100%;"
            />
          </div>
          <!-- 乡镇排名 -->
          <table
            v-if="isClickIndex"
            border="1"
            style="border-collapse:collapse;margin-bottom:10px;"
          >
            <tr>
              <td v-for="item in indexChartData.rankList" :key="item.townName">{{item.townName}}</td>
            </tr>
            <tr>
              <td v-for="(item,index) in indexChartData.rankList" :key="index">第 {{item.rank}} 名</td>
            </tr>
          </table>
          <div v-if="!isClickIndex">
            <Table border :columns="analysHead" :data="analysData"></Table>
          </div>
          <!-- 点击指标显示指标分析-->
          <Alert type="success" v-if="isClickIndex">
            <Row>
              排名前
              <InputNumber v-model="rankCustom.topNum" :min="1" style="width:70px;"></InputNumber>名 &nbsp;&nbsp;&nbsp;
              排名在
              <InputNumber v-model="rankCustom.badNum" :min="1" style="width:70px;"></InputNumber>名之后
              <Button type="primary" @click="queryIndexDetail">查询</Button>
            </Row>
            <div class="index-analysis">
              <h2>{{indexAnalys.indexConclusion}}</h2>
              <Row>
                <Col span="11">
                  <p class="small-titles">乡镇完成较好的如下：</p>
                  <p v-for="item in indexAnalys.topRank" :key="item.townName">
                    乡镇：{{item.townName}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名次：第
                    <span
                      class="green-font"
                    >{{item.rankInt}}</span> 名
                  </p>
                </Col>
                <Col span="11">
                  <p class="small-titles">乡镇完成较差的如下：</p>
                  <p v-for="items in indexAnalys.badRank" :key="items.townName">
                    乡镇：{{items.townName}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名次：第
                    <span
                      class="red-font"
                    >{{items.rankInt}}</span> 名
                  </p>
                </Col>
              </Row>
            </div>
          </Alert>
        </Card>
      </Row>
      <div class="demo-drawer-footer">
        <Button type="error" style="margin-right: 8px" @click="cancelModal">关闭</Button>
      </div>
    </Drawer>

    <!-- 乡镇指标分析弹窗-->
    <Drawer
      :title="townModal.townModalTitle"
      @on-close="cancelTownModal"
      :styles="styles"
      width="100%"
      v-model="townModal.modal"
    >
      <!-- 导出分析报告 -->
      <Row style="margin-bottom:10px;">
        <DatePicker
          type="month"
          @on-change="getTownAnalysDate"
          format="yyyyMM"
          placeholder="请选择导出日期(必填)"
          style="width: 200px;"
        ></DatePicker>
        <Button type="success" @click="downloadTownAnalys" style="margin-left:10px;">导出分析报告</Button>
      </Row>
      <!-- 乡镇好坏指标 -->
      <Row>
        <Alert type="success">
          <div class="index-analysis">
            <h2>{{townAnalysisData.townConclusion}}</h2>
            <Row>
              <i-col :xs="24" :md="12" :lg="12">
                <p class="small-titles">指标较好的如下：</p>
                <Row v-for="item in townAnalysisData.goodIndex" :key="item.indexName">
                  <i-col :xs="12">{{item.indexName}}</i-col>
                  <i-col :xs="12">
                    名次：第
                    <span class="green-font">{{item.indexRank}}</span> 名
                  </i-col>
                </Row>
              </i-col>
              <i-col :xs="24" :md="12" :lg="12">
                <p class="small-titles">指标较差的如下：</p>
                <Row v-for="items in townAnalysisData.badIndex" :key="items.indexName">
                  <i-col :xs="12">{{items.indexName}}</i-col>
                  <i-col :xs="12">
                    名次：第
                    <span class="red-font">{{items.indexRank}}</span> 名
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </Alert>
      </Row>
      <!-- 表格分析 -->
      <Row style="margin:15px 0;">
        <Table border :columns="townTableAnalys" :data="townTableData" :height="500"></Table>
      </Row>
      <div class="demo-drawer-footer">
        <Button type="error" style="margin-right: 8px" @click="cancelTownModal">关闭</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { hasOneOf } from "@/libs/tools";
import { indexAnalysAjax, townIndexAnalysAjax } from "@/api/countyTown";
import barStack from "./bar-stack";
import { URL } from "@/libs/util";
// 以防命名冲突
const HOST = URL;
// 查询URL
const QUERY_URL = "/townScore/indictionRank";
// 点击指标名图表接口
const CHARTS_URL = "/townScore/indictionRank/chart";
// 点击乡镇分数图表接口
const TOWNCHARTS_URL = "/townScore/townIdex/chart";
// 点击乡镇按钮分析接口
const TOWNABALYSIS_URL = "/townScore/townIdex/analy";

export default {
  components: {
    barStack
  },
  data() {
    return {
      tabelLoading: false, // 表格loading
      // 搜索数据
      searchData: {
        dateTime: "" // 日期
      },
      // 指标对比数据
      indexData: {
        dateTime: "", // 日期
        townListData: [] // 选中的乡镇对比集合
      },
      indexDatetime: "", // 所选指标时间
      // 乡镇指标名次定制
      rankCustom: {
        topNum: null,
        badNum: null
      },
      indexDetailAnsys: {
        top: 0,
        bad: 0
      },
      isDisableBtn: true,
      // 模态框乡镇多选对比
      townList: [],
      checkAllTown: [], // 乡镇全选
      isShowChart: true, // 是否显示图表
      isClickIndex: true, // 指标:true 分数：false
      pageTotal: 10, // 总页数
      pageSize: 10, // 每页条数
      pageNumber: 1, // 默认第一页
      isshowModal: false, // 模态框
      // 图表排名顺序
      indexChartData: {
        name: [], // 乡镇名
        score: [], //  最终得分  折现图
        scoreRate: [], // 得分率 柱状图
        weight: [], // 权重
        rankList: [] // 排名
      },
      tableHead: [
        {
          title: "指标名称",
          key: "indexName",
          width: 380,
          fixed: "left",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "default"
                },
                style: {
                  width: "auto"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.indexData.id = params.row.id; // 赋值二级页面id
                    this.indexDatetime = this.searchData.dateTime;
                    this._getChartData(this.searchData, CHARTS_URL);
                    // this.searchData.dateTime = ""; // 清空时间日期
                    this.indexTitle = params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = true;
                    console.log(this.searchData);
                    if (this.isshowModal) {
                      this.rankCustom = {
                        topNum: null,
                        badNum: null
                      };
                    }
                  }
                }
              },
              params.row.indexName
            );
          }
        },
        {
          title: "塘前",
          key: "塘前乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1001";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.塘前乡 : ""
            );
          }
        },
        {
          title: "葛岭",
          key: "葛岭镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1002";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.葛岭镇 : ""
            );
          }
        },
        {
          title: "樟城",
          key: "樟城镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1003";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.樟城镇 : ""
            );
          }
        },
        {
          title: "城峰",
          key: "城峰镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1004";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.城峰镇 : ""
            );
          }
        },
        {
          title: "清凉",
          key: "清凉镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1005";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.清凉镇 : ""
            );
          }
        },
        {
          title: "富泉",
          key: "富泉乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1006";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.富泉乡 : ""
            );
          }
        },
        {
          title: "岭路",
          key: "岭路乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1007";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.岭路乡 : ""
            );
          }
        },
        {
          title: "赤锡",
          key: "赤锡乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1093";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.赤锡乡 : ""
            );
          }
        },
        {
          title: "梧桐",
          key: "梧桐镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1009";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.梧桐镇 : ""
            );
          }
        },
        {
          title: "嵩口",
          key: "嵩口镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1010";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.嵩口镇 : ""
            );
          }
        },
        {
          title: "洑口",
          key: "洑口乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1011";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.洑口乡 : ""
            );
          }
        },
        {
          title: "盖洋",
          key: "盖洋乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1012";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.盖洋乡 : ""
            );
          }
        },
        {
          title: "长庆",
          key: "长庆镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1013";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名s
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.长庆镇 : ""
            );
          }
        },
        {
          title: "东洋",
          key: "东洋乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1014";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.东洋乡 : ""
            );
          }
        },
        {
          title: "霞拔",
          key: "霞拔乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1015";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.霞拔乡 : ""
            );
          }
        },
        {
          title: "同安",
          key: "同安镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1016";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名s
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.同安镇 : ""
            );
          }
        },
        {
          title: "大洋",
          key: "大洋镇",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1017";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名s
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.大洋镇 : ""
            );
          }
        },
        {
          title: "盘谷",
          key: "盘谷乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1018";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名s
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.盘谷乡 : ""
            );
          }
        },
        {
          title: "红星",
          key: "红星乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1019";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名s
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.红星乡 : ""
            );
          }
        },
        {
          title: "白云",
          key: "白云乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1020";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名s
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.白云乡 : ""
            );
          }
        },
        {
          title: "丹云",
          key: "丹云乡",
          width: 110,
          sortable: true,
          render: (h, params) => {
            let code = "1021";
            let isDisabled = false;
            if (this.departCode === code || this.SuperAdmin === true) {
              isDisabled = false;
            } else {
              isDisabled = true;
            }
            return h(
              "Button",
              {
                props: {
                  type: "default",
                  disabled: isDisabled
                },
                style: {
                  width: "70px"
                },
                on: {
                  click: () => {
                    this.searchData.id = params.row.id; // 赋值id
                    this.searchData.indexName = params.row.indexName; // 赋值指标名
                    let townName = params.column.key; // 获取乡镇名
                    this.searchData.townName = townName; // 赋值乡镇名传后端
                    console.log(this.searchData);
                    this._getChartData(this.searchData, TOWNCHARTS_URL);
                    this.indexTitle = townName + "---" + params.row.indexName; // 重新赋值模态框标题
                    this.isshowModal = true;
                    this.isClickIndex = false;
                  }
                }
              },
              isDisabled === false ? params.row.丹云乡 : ""
            );
          }
        }
      ],
      tableData: [], // 表格数据
      indexTitle: "指标详情", // 指标详情
      // 模态框指标分析
      indexAnalys: {
        indexConclusion: "", // 总结
        index: [],
        topRank: [], // 乡镇前几名
        badRank: [] // 乡镇后几名
      },
      // 二级弹窗样式
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static"
      },
      // 乡镇弹窗
      townModal: {
        modal: false,
        townModalTitle: "" // 标题
      },
      // 乡镇分析数据
      townAnalysisData: {
        analy: [], // 指标
        goodIndex: [],
        badIndex: [],
        townConclusion: "" // 总结
      },
      townTableAnalys: [
        {
          title: "指标名称",
          key: "indexName"
        },
        {
          title: "权重",
          key: "weight",
          sortable: true
        },
        {
          title: "得分",
          key: "finalScore",
          sortable: true
        },
        {
          title: "得分率(百分制)",
          key: "finalScore",
          sortable: true
        },
        {
          title: "排名情况",
          key: "rank",
          sortable: true
        },
        {
          title: "各乡镇最高分",
          key: "maxScore",
          sortable: true
        },
        {
          title: "各乡镇最低分",
          key: "minScore",
          sortable: true
        }
      ],
      townTableData: [],
      // 乡镇图表转表格分析
      analysHead: [
        {
          title: "    ",
          key: "tag",
          width: 80,
          fixed: "left",
          render: (h, params) => {
            return h("div", [
              h("p", params.row.finalScoreTag),
              h("div", { style: this.tableStyles }),
              h("p", params.row.rankTag),
              h("div", { style: this.tableStyles }),
              h("p", params.row.weightTag),
              h("div", { style: this.tableStyles }),
              h("p", params.row.scoreTag)
            ]);
          }
        },
        {
          title: "一月",
          key: "month01",
          render: (h, params) => {
            if (params.row.month01 !== undefined) {
              return h("div", [
                h("p", params.row.month01.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month01.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month01.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month01.score)
              ]);
            }
          }
        },
        {
          title: "二月",
          key: "month02",
          render: (h, params) => {
            if (params.row.month02 !== undefined) {
              return h("div", [
                h("p", params.row.month02.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month02.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month02.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month02.score)
              ]);
            }
          }
        },
        {
          title: "三月",
          key: "month03",
          render: (h, params) => {
            if (params.row.month03 !== undefined) {
              return h("div", [
                h("p", params.row.month03.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month03.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month03.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month03.score)
              ]);
            }
          }
        },
        {
          title: "四月",
          key: "month04",
          render: (h, params) => {
            if (params.row.month04 !== undefined) {
              return h("div", [
                h("p", params.row.month04.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month04.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month04.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month04.score)
              ]);
            }
          }
        },
        {
          title: "五月",
          key: "month05",
          render: (h, params) => {
            if (params.row.month05 !== undefined) {
              return h("div", [
                h("p", params.row.month05.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month05.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month05.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month05.score)
              ]);
            }
          }
        },
        {
          title: "六月",
          key: "month06",
          render: (h, params) => {
            if (params.row.month06 !== undefined) {
              return h("div", [
                h("p", params.row.month06.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month06.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month06.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month06.score)
              ]);
            }
          }
        },
        {
          title: "七月",
          key: "month07",
          render: (h, params) => {
            if (params.row.month07 !== undefined) {
              return h("div", [
                h("p", params.row.month07.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month07.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month07.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month07.score)
              ]);
            }
          }
        },
        {
          title: "八月",
          key: "month08",
          render: (h, params) => {
            if (params.row.month08 !== undefined) {
              return h("div", [
                h("p", params.row.month08.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month08.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month08.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month08.score)
              ]);
            }
          }
        },
        {
          title: "九月",
          key: "month09",
          render: (h, params) => {
            if (params.row.month09 !== undefined) {
              return h("div", [
                h("p", params.row.month09.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month09.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month09.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month09.score)
              ]);
            }
          }
        },
        {
          title: "十月",
          key: "month10",
          render: (h, params) => {
            if (params.row.month10 !== undefined) {
              return h("div", [
                h("p", params.row.month10.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month10.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month10.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month10.score)
              ]);
            }
          }
        },
        {
          title: "十一月",
          key: "month11",
          render: (h, params) => {
            if (params.row.month11 !== undefined) {
              return h("div", [
                h("p", params.row.month11.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month11.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month11.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month11.score)
              ]);
            }
          }
        },
        {
          title: "十二月",
          key: "month12",
          render: (h, params) => {
            if (params.row.month12 !== undefined) {
              return h("div", [
                h("p", params.row.month12.finalScore),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month12.rank),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month12.weight),
                h("div", { style: this.tableStyles }),
                h("p", params.row.month12.score)
              ]);
            }
          }
        }
      ],
      analysData: [],
      tableStyles: {
        margin: "5px 0",
        height: "1px",
        background: "#ccc"
      },
      townAnalysDate: "", // 获取乡镇分析时间
      departCode: "",
      isSuperAdmins: "",
      SuperAdmin: false
    };
  },
  methods: {
    // 搜索
    searchSubmit(pageSize, pageNumber) {
      this._getData(this.searchData, QUERY_URL, this.pageSize, this.pageNumber);
    },
    // 重置搜索
    seachReset(name) {
      this.$refs[name].resetFields();
    },
    // 查询
    _getData(formData, url, pageSize, pageNumber) {
      this.tabelLoading = true;
      formData = Object.assign(formData, {
        pageSize,
        pageNumber
      });
      const keyOne = "townIndicatorsFilter"; // 注意：keyOne需要和后端接收的参数名一样
      indexAnalysAjax({ formData, url, keyOne })
        .then(result => {
          console.log(result);
          if (result.data.code === "200") {
            this.tabelLoading = false;
            this.tableData = result.data.results.list;
            this.pageTotal = result.data.results.pageTotal;
            this.townList = result.data.results.townList; // 模态框乡镇选择框赋值
            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查询图表数据 和 查看乡镇对比数据
    _getChartData(formData, url) {
      const keyOne = "townIndicatorsFilter"; // 注意：keyOne需要和后端接收的参数名一样
      indexAnalysAjax({ formData, url, keyOne })
        .then(result => {
          if (result.data.code === "200") {
            let item = result.data.results;
            this.indexChartData.name = item.name; // 乡镇名
            this.indexChartData.score = item.finalScore; // 最终得分
            this.indexChartData.scoreRate = item.score; // 得分率
            this.indexChartData.weight = item.weight; // 权重
            this.indexChartData.rankList = item.rankList; // 排名

            // 点击指标分数执行
            if (!this.isClickIndex) {
              this.analysData = item.gridList;
              this.analysData.forEach(item => {
                item.weightTag = "权重";
                item.finalScoreTag = "得分";
                item.rankTag = "排名";
                item.scoreTag = "得分率";
              });
            }

            // 点击指标执行
            if (this.isClickIndex) {
              // 指标分析总结分析
              this.indexAnalys.indexConclusion = item.others.indexInfo; // 总结
              this.indexAnalys.index = item.rankList; // 前几名后几名
            }
            this.$Message.success("查询成功");
            this.isShowChart = true;
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取乡镇分析数据
    _getTownAnalysidData(formData, url) {
      const keyOne = "townFilter";
      townIndexAnalysAjax({ formData, url, keyOne })
        .then(result => {
          if (result.data.code === "200") {
            let item = result.data.results;
            this.townTableData = item.analy; // 指标分析
            this.townAnalysisData.badIndex = item.badIndex; // 好指标
            this.townAnalysisData.goodIndex = item.goodIndex; // 坏指标
            this.townAnalysisData.townConclusion = item.mainword; // 总结
            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 页码
    pageNumberChange(pageNumber) {
      this.pageNumber = pageNumber;
      this._getData(this.searchData, QUERY_URL, this.pageSize, this.pageNumber);
    },
    // 页数
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getData(this.searchData, QUERY_URL, this.pageSize, this.pageNumber);
    },
    // 关闭详情模态框
    cancelModal() {
      // 需清空图表数据
      this.indexChartData = {
        name: [], // 乡镇名
        score: [], //  最终得分  折现图
        scoreRate: [], // 得分率 柱状图
        weight: [] // 权重
      };
      this.rankCustom = {
        topNum: null,
        badNum: null
      };
      this.indexData = {
        dateTime: "",
        townListData: []
      };
      this.isshowModal = false;
    },
    // seach时间查询
    handlerFormat(year) {
      this.searchData.dateTime = year;
    },
    // 二级页面指标时间
    indexFormat(year) {
      this.indexData.dateTime = year;
      this.indexDatetime = year;
    },
    // 提交乡镇对比数据
    submitCompare() {
      this.isShowChart = false;
      this.indexChartData = {
        name: [], // 乡镇名
        score: [], //  最终得分  折现图
        scoreRate: [], // 得分率 柱状图
        weight: [] // 权重
      };
      console.log(this.indexData);
      this._getChartData(this.indexData, CHARTS_URL);
    },
    submitRest() {
      this.indexData.townListData = [];
      this.indexData.dateTime = "";
    },
    /**
     * 乡镇按钮事件
     * townCode =>乡镇code值
     * townName =>乡镇名
     */
    townBtn(townCode, townName) {
      this.searchData.departcode = townCode; // 赋值code
      this.searchData.townName = townName; // 赋值name
      this.searchData.topNum = parseInt(this.rankCustom.topNum); // 赋值前几
      this.searchData.badNum = parseInt(this.rankCustom.badNum); // 赋值后几
      this._getTownAnalysidData(this.searchData, TOWNABALYSIS_URL);
      this.townModal.townModalTitle = townName + "--- 绩效指标完成情况";
      this.townModal.modal = true;
      console.log(this.searchData);
    },
    // 乡镇弹窗
    cancelTownModal() {
      this.townModal.modal = false;
    },
    /**
     * 下载乡镇分析报告
     */
    downloadTownAnalys() {
      let dateTime = this.townAnalysDate;
      let townName = this.searchData.townName;
      let departcode = this.searchData.departcode;
      let topNum = this.rankCustom.topNum;
      let badNum = this.rankCustom.badNum;
      if (this.townAnalysDate !== "") {
        window.open(
          HOST +
            "/townScore/exportWrod?datetime=" +
            dateTime +
            "&townName=" +
            townName +
            "&departcode=" +
            departcode +
            "&topNum=" +
            topNum +
            "&badNum=" +
            badNum
        );
      } else {
        this.$Notice.error({
          title: "请选择导出日期",
          duration: 3.5
        });
      }
    },
    // 查询指标情况
    queryIndexDetail() {
      if (this.rankCustom.topNum === null || this.rankCustom.badNum === null) {
        this.$Message.error("查询失败,输入框不能为空");
        return;
      }
      this.indexDetailAnsys.top = this.rankCustom.topNum; // 赋值自定义的前几名
      this.indexDetailAnsys.bad = this.rankCustom.badNum; // 赋值自定义的后几名

      let topArr = []; // 排名前几名
      let badArr = []; // 排名后几名
      for (let i = 0; i < this.indexAnalys.index.length; i++) {
        let item = this.indexAnalys.index[i];
        if (item.rankInt > 0 && item.rankInt <= this.indexDetailAnsys.top) {
          topArr.push(item);
        }

        if (item.rankInt >= this.indexDetailAnsys.bad) {
          badArr.push(item);
        }
      }
      this.indexAnalys.badRank = badArr;
      this.indexAnalys.topRank = topArr;
    },
    // 获取乡镇分析报告时间
    getTownAnalysDate(date) {
      this.townAnalysDate = date;
    }
  },
  created() {
    this._getData(this.searchData, QUERY_URL, this.pageSize, this.pageNumber);
    // 获取乡镇code
    let departCode = sessionStorage.getItem("departCode");
    this.departCode = departCode;
    // 获取是否为超级管理员
    let isSuperAdmin = sessionStorage.getItem("isSuperAdmin");
    if (isSuperAdmin === "admin") {
      this.SuperAdmin = true;
    } else {
      this.SuperAdmin = false;
    }
  }
};
</script>

<style scoped>
.index-analysis h2 {
  margin: 10px 0;
}

.index-analysis .small-titles {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 5px 16px;
  text-align: right;
  background: #fff;
}

.red-font {
  font-size: 18px;
  color: #ed4014;
}

.green-font {
  font-size: 18px;
  color: #19be6b;
}

th,
td {
  padding: 5px;
}
</style>

<style >
#analysisDrawer .ivu-drawer-close .ivu-icon-ios-close {
  font-size: 31px;
  color: #999;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  position: relative;
  top: 1px;
  color: red;
}
</style>
